<template>
  <div>
    <div id="container" style="width: 100%; height: 900px;"></div> <!-- 设置容器大小 -->
<!--    <div class="input-card" style="width: 120px">-->
<!--      <button class="btn" @click="createPolygon" style="margin-bottom: 5px">新建</button>-->
<!--      <button class="btn" @click="openEditor" style="margin-bottom: 5px">开始编辑</button>-->
<!--      <button class="btn" @click="closeEditor">结束编辑</button>-->
<!--    </div>-->
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: "MapComponent",
  data() {
    return {
      map: null,
      polygon1: null,
      polygon2: null,
      polyEditor: null,
    };
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "6c1c7414bd81a86947bdf8ed66a9677b", // 使用环境变量存储API Key
        version: "2.0",
        plugins: ['AMap.Scale', 'AMap.ToolBar'] // 加载比例尺和工具栏插件
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          center: [121.801628, 31.062258],
          zoom: 16.8,
        });
        this.map.plugin(['AMap.MapType','AMap.Scale','AMap.HawkEye','AMap.PolygonEditor'],()=>{
          this.map.addControl(new AMap.MapType());
          this.map.addControl(new AMap.Scale());
          this.map.addControl(new AMap.HawkEye());
        });
        const path1 = [
          [116.475334, 39.997534],
          [116.476627, 39.998315],
          [116.478603, 39.99879],
          [116.478529, 40.000296],
          [116.475082, 40.000151],
          [116.473421, 39.998717],
        ];
        const path2 = [
          [116.474595, 40.001321],
          [116.473526, 39.999865],
          [116.476284, 40.000917],
        ];

        this.polygon1 = new AMap.Polygon({
          path: path1,
        });
        this.polygon2 = new AMap.Polygon({
          path: path2,
        });

        this.map.add([this.polygon1, this.polygon2]);
        this.map.setFitView();

        this.polyEditor = new AMap.PolygonEditor(this.map);
        this.polyEditor.addAdsorbPolygons([this.polygon1, this.polygon2]);

        this.polyEditor.on('add', (data) => {
          const polygon = data.target;
          this.polyEditor.addAdsorbPolygons(polygon);
          polygon.on('dblclick', () => {
            this.polyEditor.setTarget(polygon);
            this.openEditor();
          });
        });

        this.polygon1.on('dblclick', () => {
          this.polyEditor.setTarget(this.polygon1);
          this.openEditor();
        });

        this.polygon2.on('dblclick', () => {
          this.polyEditor.setTarget(this.polygon2);
          this.openEditor();
        });

        // 默认打开第二个多边形的编辑
        this.polyEditor.setTarget(this.polygon2);
        this.openEditor();
      }).catch(e => {
        // console.error("地图加载失败:", e);
        // alert("地图加载失败，请稍后重试。");
      });

    },
    createPolygon() {
      this.polyEditor.close();
      this.polyEditor.setTarget();
      this.openEditor();
    },
    openEditor() {
      this.polyEditor.open();
    },
    closeEditor() {
      this.polyEditor.close();
    },
  },
  mounted() {
    this.initMap();
  },
  beforeDestroy() {
    if (this.map) {
      this.map.destroy(); // 销毁地图实例
    }
  }
};
</script>

<style >
.input-card {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}

.btn {
  margin-bottom: 5px;
}
</style>
